<template>
  <div class="w-full bg-fill-3 py-4">
    <!-- 标题 -->
    <div class="grid gap-x-2 gap-y-4 grid-cols-6" :style="{ 'grid-template-columns': 'repeat(4, 1fr) 60px' }">
      <div class="px-8 flex items-center">
        <mci-text model-value="参数名称" />
      </div>
      <div class="px-8 flex items-center">
        <mci-text model-value="字段Key" />
      </div>
      <div class="px-8 flex items-center">
        <mci-text model-value="类型" />
      </div>
      <div class="px-8 flex items-center">
        <mci-text model-value="默认值" />
      </div>
      <!-- <div class="px-8 flex items-center">
        <mci-text model-value="参数说明" />
      </div> -->
      <div class="px-8 flex items-center">
        <mci-text model-value="操作" />
      </div>
    </div>
    <!-- 行 -->

    <div class="w-full min-h-120 max-h-500" style="overflow-y: auto">
      <div
        v-for="(item, index) in paramDatas"
        :key="item.id"
        class="grid gap-x-2 gap-y-6 mt-4 grid-cols-6 pb-8"
        :style="{ 'grid-template-columns': 'repeat(4, 1fr) 60px' }"
        style="padding-bottom: 10px"
      >
        <div class="flex items-center px-8">
          <mci-input
            v-model="item.varLabel"
            placeholder="请输入中文名称"
            :min="INPUT_MIN_DATA_NAME"
            :max="INPUT_MAX_DATA_NAME"
            class="w-full"
          />
        </div>
        <div class="flex items-center px-8">
          <mci-input
            v-model="item.varName"
            placeholder="请输入英文名称"
            :min="INPUT_MIN_DATA_KEY"
            :max="INPUT_MAX_DATA_KEY"
            class="w-full"
          />
        </div>
        <div class="flex items-center px-8">
          <mci-select v-model="item.varType" :list="fieldTypeOptions" placeholder="请选择字段类型" class="w-full">
            <mci-option
              v-for="option in fieldTypeOptions"
              :key="option.dictCode"
              :label="option.dictName"
              :value="option.dictCode"
            />
          </mci-select>
        </div>
        <div class="flex items-center px-8">
          <mci-input
            v-model="item.initValue"
            placeholder="请输入默认值"
            :min="INPUT_MIN_DATA_DEFAULT"
            :max="INPUT_MAX_DATA_DEFAULT"
            class="w-full"
          />
        </div>
        <div class="flex items-center px-8">
          <mci-button type="danger" link @click="deleteRow(index)"> 删除 </mci-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { v4 as uuidv4 } from 'uuid';
import { MciText, MciButton, MciInput, MciSelect, MciOption } from '@/components/base';
import {
  INPUT_MAX_DATA_NAME,
  INPUT_MIN_DATA_NAME,
  INPUT_MAX_DATA_KEY,
  INPUT_MIN_DATA_KEY,
  INPUT_MAX_DATA_DEFAULT,
  INPUT_MIN_DATA_DEFAULT
} from './data';
import { getDictFieldType } from '@/api/decision-engine';
import type { IGetDictFieldTypeRes } from '@/api/decision-engine';

export interface Props {
  initVals?: any[];
}
const props = withDefaults(defineProps<Props>(), {
  initVals: () => []
});
// 值类型
const fieldTypeOptions = ref<any[]>([]);
// 参数列表
const paramDatas = ref<any[]>([]);
paramDatas.value = props.initVals || [];

const deleteRow = (index: number) => {
  paramDatas.value.splice(index, 1);
};

const initData = (parameters?: any) => {
  paramDatas.value = parameters || [];
};
// 增加行
const addRow = () => {
  const row: any = {
    initValue: '',
    varLabel: '',
    varName: '',
    varType: '',
    id: uuidv4()
  };
  paramDatas.value.push(row);
};

// 值类型
const fieldTypeRequest = async () => {
  const data: IGetDictFieldTypeRes = await getDictFieldType();

  if (data) {
    fieldTypeOptions.value = data;
  }
};
fieldTypeRequest();

const getData = () => {
  return paramDatas.value;
};

defineExpose({
  initData,
  getData,
  addRow
});
</script>
